<template>
    <el-tree v-bind="$attrs" ref="treeRef">
        <template #default="{ node, data }">
            <div v-if="data.id" class="tree_node">
                <div class="tree_node_left">{{ data.categoryName }}</div>
                <div class="tree_node_right" @click.stop>
                    <el-button
                        v-auth="'classify:add'"
                        v-if="node.level === 1"
                        size="small"
                        @click="$emit('add', { node, data })">
                        新增子分组
                    </el-button>
                    <el-button v-auth="'classify:edit'" size="small" @click="$emit('edit', { node, data })">
                        编辑
                    </el-button>
                    <el-popconfirm
                        placement="top"
                        width="200"
                        cancel-button-text="取消"
                        confirm-button-text="确定"
                        :icon="WarningFilled"
                        icon-color="#faad14"
                        title="确定要删除该分组吗？"
                        @confirm="$emit('delete', { data, node })">
                        <template #reference>
                            <el-button v-auth="'classify:delete'" size="small"> 删除 </el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </div>
        </template>
    </el-tree>
</template>

<script setup>
import { WarningFilled } from '@element-plus/icons-vue';
</script>

<style lang="scss" src="../category/treeStyle.scss" scoped></style>
